<template>
  <div class="flex">
    <div id="main" style="width: 500px; height: 500px"></div>
    <div id="bing" style="width: 500px; height: 500px"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    window.onresize = function () {
      myChart1.resize();
      myChart.resize();
    };
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    var myChart1 = echarts.init(document.getElementById("bing"));

    // 绘制图表
    myChart.setOption({
      // 标题
      title: {
        text: "柱状图",
      },
      legend: {
        //图标交互
        top: "5%",
        left: "center",
        orient: "horizontal",
      },

      // dataZoom: {
      //   //缩放
      //   show: true,
      //   realtime: true,
      //   start: 20,
      //   end: 30,
      // },
      
      // 鼠标放上显示数据
      tooltip: {},
      legendselectchanged: {
        data: ["1", "2", "3", "4", "5", "6"],
      },
      // x轴样式
      xAxis: {
        type: "category",
        // X轴数据
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        // X轴样式
        axisLabel: {
          interval: 0, //字体间隔
          rotate: "45", //字体旋转
          show: true,
          textStyle: {
            color: "#ccc", //x轴文字颜色
          },
        },
      },
      // Y轴样式
      yAxis: {
        axisLabel: {
          textStyle: {
            color: "red",
          },
        },
      },
      // 内容
      series: [
        {
          name: "销量",
          type: "bar",
          data: [
            5,
            // 单个样式改变
            {
              value: 10,
              itemStyle: {
                borderColor: "#a90000", //边框颜色
                borderWidth: 2, //边框
                color: "#a90000",
              },
            },
            10,
            20,
            36,
            20,
          ], //样式 (整体)
          itemStyle: {
            borderRadius: 5, //边框宽度
            borderColor: "#89D961", //边框颜色
            borderWidth: 2, //边框
            color: "#89D961", //柱状图颜色

            // 随机改变颜色
            // normal: {
            //   //改变多种颜色
            //   color: function () {
            //     return (
            //       "#" +
            //       Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16)
            //     );
            //   },
            // },

          },
        },
      ],
    });

    // myChart.getZr().on("click", function (e) {
    //   console.log(e);
    // });
    // myChart.getZr().off("click");
    // myChart.getZr().on("click", params => {
    //   // 获取点击位置
    //   const pointInPixel = [params.offsetX, params.offsetY];
    //   // 判断是否在坐标系内
    //   if (myChart.containPixel("grid", pointInPixel)) {
    //     // 获取点击位置的坐标系[x，y]
    //     const yIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[1];
    //     // ...根据[x，y]可获取点击柱子信息进行操做
    //     console.log(yIndex);
    //   }
    // })

    // 点击弹出提示框
    myChart.on("click", function (params) {
      alert(params.name);
      console.log(params.name, params.data);
    });
    // 饼状图

    var option = {
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },

      tooltip: {
        //鼠标放上显示文字
        trigger: "item",
      },
      legend: {
        //图标交互
        top: "5%",
        left: "center",
        orient: "horizontal",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },

          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          // 数据
          data: [
            { value: 1048, name: "A" },
            { value: 735, name: "B" },
            { value: 580, name: "C" },
            { value: 484, name: "D" },
            { value: 300, name: "E" },
          ],
        },
      ],
    };
    myChart1.getZr().on("click", function (e) {
      console.log(e);
    });
    //
    myChart1.setOption(option);
  },
};
</script>
<style>
#echarts {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-around;
}
#first {
  width: 48%;
  height: 600px;
  display: inline-block;
  box-shadow: 1px 1px 10px #888888;
  border-radius: 30px;
  margin-top: 20px;
}
#second {
  width: 48%;
  height: 600px;
  display: inline-block;
  border-radius: 30px;
  box-shadow: 1px 1px 10px #888888;
  margin-top: 20px;
}
@media screen and (max-width: 957px) {
  #first {
    width: 957px;
  }
  #second {
    width: 957px;
  }
}
</style>